import { useDisclosure } from "@mantine/hooks";
import {
  AppShell,
  Group,
  Grid,
  NavLink,
  Box,
  ScrollArea,
  Button,
  Text,
  Paper,
  rem,
} from "@mantine/core";
import "@mantine/core/styles.css";
import { IconListSearch } from "@tabler/icons-react";

import { CloseButton } from "@mantine/core";

import WithwingsNavbar from "@/components/WithwingsNavbar";
import classes from "@/AppShell.module.css";
import WithwingsHeader from "@/components/WithwingsHeader";
import { Outlet, useLocation } from "react-router-dom";
import { useViewportSize } from "@mantine/hooks";

function MainLayout({ children }) {
  const [opened, { toggle }] = useDisclosure();
  const { height, width } = useViewportSize();
  const location = useLocation();

  return (
    <AppShell
      header={{ height: 60 }}
      navbar={{
        width: 200,
        height: "100vh",
        breakpoint: "sm",
        collapsed: { mobile: !opened },
      }}
      padding="md"
      classNames={{
        header: classes.header,
        navbar: classes.navbar,
        main: classes.main,
      }}
      // styles={{header:{backgroundColor:"red"}}}
    >
      <WithwingsHeader />
      <WithwingsNavbar />
      <AppShell.Main>
        {children}
        <Outlet key={location.pathname} />
      </AppShell.Main>
      <AppShell.Aside></AppShell.Aside>
    </AppShell>
  );
}

export default MainLayout;
